<template>
  <div>
    <el-row>
      <i class="el-icon-arrow-left" @click="goBack"></i>
      <span class="font-weight rebuild_order" :to="{ path: '/workTrigger' }">{{
        $store.state.orderTitle
      }}</span>
    </el-row>
    <el-divider></el-divider>
    <el-form
      ref="form"
      :model="trigger"
      style="width: 80%; margin: 0 auto"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="名称：" prop="triggerName">
        <el-input
          v-model="trigger.triggerName"
          type="text"
          maxlength="20"
          show-word-limit
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="描述：">
        <el-input type="textarea" v-model="trigger.triggerDescribe"></el-input>
      </el-form-item>
      <el-form-item label="流程名称：" prop="workOrderTypeId">
        <el-select
          v-model="trigger.workOrderTypeId"
          default-first-option
          @change="changeRegion(trigger.workOrderTypeId)"
        >
          <el-option
            v-for="item in workTypeList"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="执行次数：" prop="triggerType">
        <el-select v-model="trigger.triggerType" default-first-option>
          <el-option
            v-for="item in triggerTypeList"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 满足所有条件 -->
      <el-form-item label="筛选条件" class="select-table">
        满足下列所有条件
        <el-table
          :data="allConditionsTableData"
          border
          class="tableStyle"
          max-height="250"
          :header-cell-style="{ background: '#F2F3F8' }"
          style="width: 100%"
        >
          <el-table-column label="类型" min-width="20%">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.typeValue"
                @change="
                  changeType(scope.$index, scope.row, allConditionsTableData)
                "
              >
                <el-option
                  v-for="item in selectAllConditionVal"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="包含" min-width="40%">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.containValueUser"
                style="width: 40%"
                v-show="scope.row.tagShow === 2"
                @change="
                  changeUser(scope.$index, scope.row, allConditionsTableData)
                "
              >
                <el-option
                  v-for="item in scope.row.selectSecondConditionValUser"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="scope.row.containValue"
                @change="
                  changeContain(scope.$index, scope.row, allConditionsTableData)
                "
                style="width: 50%"
              >
                <el-option
                  v-for="item in scope.row.selectSecondConditionVal"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="信息" min-width="35%">
            <template slot-scope="scope">
              <el-select
                style="width: 80%"
                v-if="
                  scope.row.tagIn === 3 &&
                  scope.row.shapeTag === 2 &&
                  scope.row.containValueUser != 'dept'
                "
                v-model="scope.row.infoVal"
                multiple
                filterable
                @change="
                  selectsChange(scope.$index, scope.row, allConditionsTableData)
                "
                placeholder="请选择"
              >
                <el-option
                  v-for="item in scope.row.dataList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!-- 部门数据 -->
              <el-cascader
                style="width: 80%"
                v-else-if="
                  scope.row.tagIn === 3 &&
                  scope.row.shapeTag === 2 &&
                  scope.row.containValueUser == 'dept'
                "
                expand-trigger="hover"
                filterable
                :options="scope.row.dataList"
                placeholder="请选择"
                :props="{
                  value: 'value',
                  label: 'label',
                  children: 'children',
                  multiple: true,
                  checkStrictly: true,
                }"
                v-model="scope.row.infoVal"
                @change="
                  selectsChange(scope.$index, scope.row, allConditionsTableData)
                "
              >
              </el-cascader>
              <el-input
                style="width: 80%"
                v-if="scope.row.tagIn === 0 && scope.row.shapeTag === 1"
                v-model="scope.row.infoVal"
                placeholder="请输入内容"
              ></el-input>
              <p
                style="width: 80%"
                v-if="scope.row.tagIn === 1 && scope.row.shapeTag === 4"
              >
                <el-input
                  type="number"
                  style="width: 100px"
                  v-model="scope.row.infoVal"
                  :min="0"
                ></el-input>
                <span>次</span>
              </p>
              <p
                style="width: 80%"
                v-if="scope.row.tagIn === 1 && scope.row.shapeTag === 5"
              >
                <el-input
                  type="number"
                  style="width: 30%"
                  v-model="scope.row.infoVal"
                  :min="0"
                ></el-input>
                <span>小时</span>
              </p>
              <p
                style="width: 100%"
                v-if="scope.row.tagIn === 2 && scope.row.shapeTag === 5"
              >
                <el-input
                  type="number"
                  style="width: 30%"
                  v-model="scope.row.hourOne"
                  :min="0"
                  @blur="
                    hourChange(scope.$index, scope.row, allConditionsTableData)
                  "
                ></el-input>
                <span>-</span>
                <el-input
                  type="number"
                  style="width: 30%"
                  v-model="scope.row.hourTwo"
                  :min="0"
                  @blur="
                    hourChange(scope.$index, scope.row, allConditionsTableData)
                  "
                ></el-input>
                <span>小时</span>
              </p>
              <el-date-picker
                style="width: 80%"
                v-show="scope.row.tagIn === 1 && scope.row.shapeTag === 3"
                v-model="scope.row.infoVals"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                @change="
                  chooseTimeRange(
                    scope.$index,
                    scope.row,
                    allConditionsTableData
                  )
                "
              ></el-date-picker>
              <el-date-picker
                v-show="scope.row.tagIn === 2 && scope.row.shapeTag === 3"
                style="width: 80%"
                v-model="scope.row.infoVal"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="
                  chooseTimeRange(
                    scope.$index,
                    scope.row,
                    allConditionsTableData
                  )
                "
              ></el-date-picker>
              <!-- 其他数据 -->
              <el-select
                @change="
                  changeSelect(scope.$index, scope.row, allConditionsTableData)
                "
                v-if="
                  scope.row.tagIn === 1 &&
                  scope.row.shapeTag === 2 &&
                  scope.row.containValueUser != 'dept'
                "
                v-model="scope.row.infoVal"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in scope.row.dataList"
                  :key="item.value + ''"
                  :label="item.label"
                  :value="item.value + ''"
                ></el-option>
              </el-select>
              <!-- 部门数据 -->
              <el-cascader
                v-if="
                  scope.row.tagIn === 1 &&
                  scope.row.shapeTag === 2 &&
                  scope.row.containValueUser == 'dept'
                "
                expand-trigger="hover"
                filterable
                :options="scope.row.dataList"
                placeholder="请选择"
                :props="{
                  value: 'value',
                  label: 'label',
                  children: 'children',
                }"
                v-model="scope.row.infoVal"
                @change="
                  selectsChange(scope.$index, scope.row, allConditionsTableData)
                "
              >
              </el-cascader>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="deleteAllConditionsTableData(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <i
          class="el-icon-circle-plus-outline button sequence-flow-btn"
          @click="addAllConditionsTableData()"
          >&nbsp;&nbsp;添加筛选条件</i
        >
      </el-form-item>
      <!-- 满足任一条件 -->
      <el-form-item class="select-table">
        满足任意一个条件
        <el-table
          :data="randomConditionsTableData"
          border
          :header-cell-style="{ background: '#F2F3F8' }"
          max-height="250"
          class="tableStyle"
          style="width: 100%"
        >
          <el-table-column label="类型" min-width="20%">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.typeValue"
                @change="
                  changeType(scope.$index, scope.row, randomConditionsTableData)
                "
              >
                <el-option
                  v-for="item in selectAllConditionVal"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="包含" min-width="40%">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.containValueUser"
                style="width: 40%"
                v-show="scope.row.tagShow === 2"
                @change="
                  changeUser(scope.$index, scope.row, randomConditionsTableData)
                "
              >
                <el-option
                  v-for="item in scope.row.selectSecondConditionValUser"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="scope.row.containValue"
                @change="
                  changeContain(
                    scope.$index,
                    scope.row,
                    randomConditionsTableData
                  )
                "
                style="width: 50%"
              >
                <el-option
                  v-for="item in scope.row.selectSecondConditionVal"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="信息" min-width="35%">
            <template slot-scope="scope">
              <!-- 其他数据 -->
              <el-select
                style="width: 80%"
                v-if="
                  scope.row.tagIn === 3 &&
                  scope.row.shapeTag === 2 &&
                  scope.row.containValueUser != 'dept'
                "
                v-model="scope.row.infoVals"
                multiple
                filterable
                default-first-option
                @change="
                  selectsChange(
                    scope.$index,
                    scope.row,
                    randomConditionsTableData
                  )
                "
                placeholder="请选择"
              >
                <el-option
                  v-for="item in scope.row.dataList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <!-- 部门数据 -->
              <el-cascader
                style="width: 80%"
                v-else-if="
                  scope.row.tagIn === 3 &&
                  scope.row.shapeTag === 2 &&
                  scope.row.containValueUser == 'dept'
                "
                expand-trigger="hover"
                multiple
                filterable
                :options="scope.row.dataList"
                placeholder="请选择"
                :props="{
                  value: 'value',
                  label: 'label',
                  children: 'children',
                  multiple: true,
                  checkStrictly: true,
                }"
                v-model="scope.row.infoVal"
                @change="
                  selectsChange(scope.$index, scope.row, allConditionsTableData)
                "
              >
              </el-cascader>
              <el-input
                style="width: 80%"
                v-if="scope.row.tagIn === 0 && scope.row.shapeTag === 1"
                v-model="scope.row.infoVal"
                placeholder="请输入内容"
              ></el-input>
              <p
                style="width: 80%"
                v-if="scope.row.tagIn === 1 && scope.row.shapeTag === 4"
              >
                <el-input
                  type="number"
                  style="width: 100px"
                  v-model="scope.row.infoVal"
                  :min="0"
                ></el-input>
                <span>次</span>
              </p>
              <p
                style="width: 80%"
                v-if="scope.row.tagIn === 1 && scope.row.shapeTag === 5"
              >
                <el-input
                  type="number"
                  style="width: 30%"
                  v-model="scope.row.infoVal"
                  :min="0"
                ></el-input>
                <span>小时</span>
              </p>
              <p
                style="width: 100%"
                v-if="scope.row.tagIn === 2 && scope.row.shapeTag === 5"
              >
                <el-input
                  type="number"
                  style="width: 30%"
                  v-model="scope.row.hourOne"
                  :min="0"
                  @blur="
                    hourChange(
                      scope.$index,
                      scope.row,
                      randomConditionsTableData
                    )
                  "
                ></el-input>
                <span>-</span>
                <el-input
                  type="number"
                  style="width: 30%"
                  v-model="scope.row.hourTwo"
                  :min="0"
                  @blur="
                    hourChange(
                      scope.$index,
                      scope.row,
                      randomConditionsTableData
                    )
                  "
                ></el-input>
                <span>小时</span>
              </p>
              <el-date-picker
                style="width: 80%"
                v-show="scope.row.tagIn === 1 && scope.row.shapeTag === 3"
                v-model="scope.row.infoVals"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                @change="
                  chooseTimeRange(
                    scope.$index,
                    scope.row,
                    randomConditionsTableData
                  )
                "
              ></el-date-picker>
              <el-date-picker
                v-show="scope.row.tagIn === 2 && scope.row.shapeTag === 3"
                style="width: 80%"
                v-model="scope.row.infoVal"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator=""
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="
                  chooseTimeRange(
                    scope.$index,
                    scope.row,
                    randomConditionsTableData
                  )
                "
              >
              </el-date-picker>
              <el-select
                @change="
                  changeSelect(
                    scope.$index,
                    scope.row,
                    randomConditionsTableData
                  )
                "
                v-if="
                  scope.row.tagIn === 1 &&
                  scope.row.shapeTag === 2 &&
                  scope.row.containValueUser != 'dept'
                "
                v-model="scope.row.infoVal"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in scope.row.dataList"
                  :key="item.value + ''"
                  :label="item.label"
                  :value="item.value + ''"
                ></el-option>
              </el-select>
              <!-- 部门数据 -->
              <el-cascader
                v-if="
                  scope.row.tagIn === 1 &&
                  scope.row.shapeTag === 2 &&
                  scope.row.containValueUser == 'dept'
                "
                expand-trigger="hover"
                filterable
                :options="scope.row.dataList"
                placeholder="请选择"
                :props="{
                  value: 'value',
                  label: 'label',
                  children: 'children',
                }"
                v-model="scope.row.infoVal"
                @change="
                  changeSelect(
                    scope.$index,
                    scope.row,
                    randomConditionsTableData
                  )
                "
              >
              </el-cascader>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="
                  deleteRandomConditionsTableData(
                    scope.$index,
                    scope.row,
                    randomConditionsTableData
                  )
                "
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <i
          class="el-icon-circle-plus-outline button sequence-flow-btn"
          @click="addRandomConditionsTableData()"
          >&nbsp;&nbsp;添加筛选条件</i
        >
      </el-form-item>
      <!-- 执行动作 -->
      <el-form-item label="执行动作" class="select-table">
        触发器激活后，执行以下动作
        <el-table
          :data="performTableData"
          border
          :header-cell-style="{ background: '#F2F3F8' }"
          class="tableStyle"
          max-height="250"
          style="width: 100%"
        >
          <el-table-column label="类型流程" min-width="30%">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.dictCode"
                @change="changePerformType(scope.$index, scope.row)"
              >
                <el-option
                  v-for="item in dictDetailList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="执行动作" min-width="60%">
            <template slot-scope="scope">
              <!-- 工单的下拉数据框 -->
              <el-row>
                <span v-if="scope.row.dictCode === 'send_msg_employee'"
                  >选择用户：</span
                >
                <el-select
                  v-show="
                    scope.row.dictCode === 'set_priority' ||
                    scope.row.dictCode === 'set_handler' ||
                    scope.row.dictCode === 'set_status' ||
                    scope.row.dictCode === 'push_msg_sysuser' ||
                    scope.row.dictCode === 'send_msg_employee'
                  "
                  v-model="scope.row.containValue"
                  @change="
                    changeSelectSecondConditionVal(
                      scope.$index,
                      scope.row,
                      performTableData[scope.$index]
                    )
                  "
                >
                  <el-option
                    v-for="item in scope.row.selectSecondConditionVal"
                    :key="item.value + ''"
                    :label="item.label"
                    :value="item.value + ''"
                  ></el-option>
                </el-select>
                <!-- 部门 -->
                <el-cascader
                  v-if="
                    (scope.row.dictCode === 'set_handler' ||
                      scope.row.dictCode === 'push_msg_sysuser' ||
                      scope.row.dictCode === 'send_msg_employee') &&
                    deptShow == 'dept'
                  "
                  expand-trigger="hover"
                  :options="scope.row.selectSecondConditionValUser"
                  :props="{
                    value: 'value',
                    label: 'label',
                    children: 'children',
                    multiple: true,
                    checkStrictly: true,
                  }"
                  v-model="scope.row.containValueUser"
                >
                </el-cascader>
                <!-- 其他的 -->
                <el-select
                  v-else-if="
                    scope.row.dictCode === 'set_handler' ||
                    scope.row.dictCode === 'push_msg_sysuser' ||
                    scope.row.dictCode === 'send_msg_employee'
                  "
                  multiple
                  v-model="scope.row.containValueUser"
                >
                  <el-option
                    v-for="item in scope.row.selectSecondConditionValUser"
                    :key="item.value + ''"
                    :label="item.label"
                    :value="item.value + ''"
                  ></el-option>
                </el-select>
              </el-row>
              <!-- 系统消息 -->
              <!-- <div v-if="scope.row.dictCode === 'push_msg_handler' || scope.row.dictCode === 'push_msg_creater' || scope.row.dictCode === 'push_msg_sysuser' || scope.row.dictCode === 'push_msg_monitor' || scope.row.dictCode === 'push_msg_sender'">
                <el-input style="width:88%"
                          v-model="scope.row.sysTitle"
                          placeholder="请输入标题信息"></el-input>
                <el-input style="width:88%"
                          type="textarea"
                          :rows="2"
                          placeholder="请输入内容"
                          v-model="scope.row.sysContent"></el-input>
              </div> -->
              <!-- 短信模板 -->
              <div v-if="scope.row.dictCode !== 'push_interface' && scope.row.dictCode !== 'set_status' && scope.row.dictCode !== 'set_handler' && scope.row.dictCode !== 'set_priority'"
              >
                <el-form-item>
                  <span>模板标题：</span>
                  <el-select
                    v-model="scope.row.msgTemplateTitle"
                    @change="msgTitleInfo(scope.$index, scope.row)"
                  >
                    <el-option
                      v-for="item in msgTemplateList"
                      :key="item.name"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <!-- <el-form-item>
                  <span>模板内容：</span>
                  <el-input
                    v-model="scope.row.msgTemplate"
                    type="textarea"
                    style="width: 80%"
                    :rows="2"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item> -->
              </div>
              <!-- 推送 -->
              <el-button
                v-show="scope.row.dictCode === 'push_interface'"
                class="el-button"
                @click="getDialogInfo(scope.$index, scope.row)"
                >接口配置</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="deletePerformTableData(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <i
          class="el-icon-circle-plus-outline button sequence-flow-btn"
          @click="addPerformTableData()"
          >&nbsp;&nbsp;添加执行动作</i
        >
      </el-form-item>
      <el-form-item>
        <el-button
          class="el-button el-button--primary el-button--medium h30Btn"
          type="primary"
          @click="onSubmit('form')"
          >完成</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 自定义按钮配置的弹框 -->
    <work-param-transform
      v-show="dialogVisible"
      @getMsg="getMsgFun"
      :customDialogDataInfo="customDialogDataInfo"
    ></work-param-transform>
  </div>
</template>

<script>
import {
  getMsgTemplate,
  getWorkOrderTypeByUserId
} from "@/api/workOrderController";
import { selectAllCondition, selectSecondCondition, selectThirdCondition, selectThirdConditionForCurrentUser } from "@/api/filterMenu";
import {
  getDetailById,
  addSave,
  upadteById,
  getTriggerActionTypeFirstList,
  getTriggerActionTypeSecondList,
  getWorkTypeAllFiledInfoByWorkOrderTypeId
} from "@/api/WorkOrderTriggerInfoController.js";
import {
  NoticeNewdate,
} from "@/api/setNotice";
import workParamTransform from "./workParamTransform.vue";
export default {
  components: {
    workParamTransform
  },
  data () {
    return {
      triggerTypeList: [
        {
          value: '0',
          label: '多次'
        }, {
          value: '1',
          label: '单次'
        },
      ],
      msgTemplateList: '',// 短信模板列表
      deptShow: '',
      workOrderShow: true,
      systemShow: false,
      ipSendInfo: false,
      systemInfoTitle: "",
      systemContentInfo: "",
      dialogVisible: false,
      triggerId: "", // 当前触发器id
      workTypeList: [], // 类型名称下拉数据
      selectAllConditionVal: [], // 类型下拉数据
      selectSecondConditionValUser: [], // 用户数据
      dictDetailList: [], // 执行动作处的下拉数据
      // selectAllConditionVal: [],
      trigger: {
        triggerType: '0'
        // triggerName: "",
        // triggerDescribe: "",
        // workOrderTypeId: "",
        // workOrderTypeName: ""
      },
      rules: {
        triggerName: [
          {
            required: true,
            message: "请输入活动名称",
            trigger: "blur"
          }
        ],
        workOrderTypeId: [
          {
            required: true,
            message: "请选择工单流程",
            trigger: "blur"
          }
        ]
      },
      allConditionsTableData: [],
      randomConditionsTableData: [],
      performTableData: [],
      allConditionsTableDataInfo: [], // 所有条件的数据
      randomConditionsTableDataInfo: [], // 任意条件的数据
      customDialogDataInfo: {
        URL: "",
        Headers: "",
        body: [] // 自定义组件表格数据
      },
      ruleFormTableData: {}, // 自定义组件中获取的数据
      msgTemplate: [],
      emailTemplate: [],
      sysMsgTemplate: []
    };
  },
  watch: {
    customDialogDataInfo (n, o) {
      this.customDialogDataInfo = n;
    },
    msgTemplateList (newVal, oldVal) {
      this.msgTemplateList = newVal
    }
  },
  created () {
    this.NoticeNewdate()
  },
  mounted () {
    this.getSelectAllNewable();
    this.selectAllCondition();
    this.getTriggerActionTypeFirstListInfo();
    if (this.$store.state.triggerId !== "") {
      this.getTriggerDetailInfo();
    }
    // this.getMsgTemplate()
  },
  methods: {
    // 获取短信/邮件/系统消息模板数据
    NoticeNewdate () {
      let _this = this
      NoticeNewdate().then((res) => {
        let data = res.data.data
        data.msgTypeList.forEach(item => {
          let code = item.dictCode
          if (code === 'msg') {
            _this.msgTemplate = item.msgTemplateList
          } else if (code === 'sys_msg') {
            _this.sysMsgTemplate = item.msgTemplateList
          } else if (code === 'email') {
            _this.emailTemplate = item.msgTemplateList
          }
        })
      });
    },
    // 获取短信模板
    // getMsgTemplate () {
    //   let params = {
    //     classify: ''
    //   };
    //   // this.msgTemplateList=[{"parent":"0","code":"1","name":"系统短信","remark":"系统短信"},{"parent":"0","code":"2","name":"自定义短信","remark":"自定义短信"},{"parent":"1","code":"11","name":"工单未处理提醒","remark":"尊敬的客户：工单未处理提醒"},{"parent":"1","code":"12","name":"工单派单提醒","remark":"工单派单提醒"},{"parent":"1","code":"13","name":"服务单派单客户通知","remark":"服务单派单客户通知"},{"parent":"1","code":"14","name":"工单超时提醒","remark":"工单超时提醒"}]
    //   getMsgTemplate(params).then(res => {
    //     if (res.data.retCode === 200) {
    //       let data = res.data.data
    //       let _this = this
    //       for (let i = 0; i < data.length; i++) {
    //         if (data[i].name == '系统短信') {
    //           _this.msgTemplateList = data.filter(item => {
    //             return item.parent == data[i].code
    //           });
    //           return
    //         }
    //       }
    //     }
    //   });
    // },
    // 获取短信模板名字
    msgTitleInfo (index, val) {
      let _this = this
      this.msgTemplateList.find((item) => {
        if (item.id == val.msgTemplateTitle) {
          _this.performTableData[index].msgTemplateId = item.id;
          _this.performTableData[index].msgTemplate = item.content;
          _this.performTableData[index].msgTemplateTitle = item.name;
        }
      });
      // this.msgTemplateList.find((item) => {
      //   if (item.remark == val.msgTemplate) {
      //     this.performTableData[index].msgTemplate = item.remark;
      //     this.performTableData[index].msgTemplateTitle = item.name;
      //   }
      // });
    },
    getDialogInfo (index, row) {
      this.customDialogDataInfo = row.containValue;
      this.dialogVisible = true;
    },
    // 获取映射字段
    getWorkTypeAllFiledInfoByWorkOrderTypeIdFun (id, index) {
      let _this = this;
      // 调取映射字段接口数据时需要将从详情页返回的数据清空
      getWorkTypeAllFiledInfoByWorkOrderTypeId(id).then(res => {
        if (res.data.retCode === 200) {
          _this.performTableData[index].containValue = {
            body: res.data.data,
            URL: "",
            Headers: ""
          };
        } else {
          _this.$messge({ type: "error", msg: res.data.msg });
        }
      });
    },
    // 保存流程id
    changeRegion (val) {
      // this.getWorkTypeAllFiledInfoByWorkOrderTypeIdFun(val + '')
      this.$store.commit("triggerTypeIdFun", val + "");
    },
    // 自定义弹框显示
    getMsgFun (val) {
      this.dialogVisible = val.dialogVisible;
      this.ruleFormTableData = val.ruleForm;
    },
    // 获取执行动作中的类型流程
    getTriggerActionTypeFirstListInfo () {
      getTriggerActionTypeFirstList("trigger_action_type").then(res => {
        if (res.data.retCode === 200) {
          this.dictDetailList = res.data.data;
        }
      });
    },
    // 获取类型列表
    selectAllCondition () {
      let _this = this;
      selectAllCondition().then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          _this.selectAllConditionVal = data.data;
        }
      });
    },
    // 根据类型所选值获取相应二级数据
    changeType (index, row, tableType) {
      if (row.typeValue === 8) {
        this.indexWorkNode = index;
        this.indexWorkType = row.typeValue;
      }
      tableType[index].containValue = "";
      tableType[index].containValueUser = "";
      tableType[index].infoVal = "";
      tableType[index].infoVals = [];
      selectSecondCondition(row.typeValue).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          tableType[index].selectSecondConditionVal = data.data.data;
          tableType[index].selectSecondConditionValUser = data.data.type || '';
          tableType[index].tagShow = data.data.tag;
          tableType[index].tagIn = 0;
          tableType[index].shapeTag = 0;
        }
      });
    },
    // 获取用户
    changeUser (index, row, tableType) {
      tableType[index].containValue = "";
      tableType[index].infoVals = "";
      tableType[index].infoVal = "";
    },
    // 获取内容
    changeContain (index, row, tableType) {
      tableType[index].infoVal = "";
      tableType[index].infoVals = "";
      // 切换到时间段的时候清空数据
      if (tableType[index].tagIn === 2 && tableType[index].shapeTag === 5) {
        tableType[index].hourOne = "";
        tableType[index].hourTwo = "";
      }
      let params = {
        firstId: row.typeValue,
        name: "",
        secondDataId: row.containValue,
        secondTypeId: row.containValueUser,
        workOrderTypeId: this.trigger.workOrderTypeId
      };
      selectThirdConditionForCurrentUser(params).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          tableType[index].dataList = data.data.dataList;
          tableType[index].shapeTag = data.data.shapeTag;
          tableType[index].tagIn = data.data.tagIn;
        } else {
          this.$message({ type: "error", message: data.msg });
        }
      });
    },
    // 三级选值
    selectsChange (index, row, tableType) {
      if (tableType[index].infoVals) {
        tableType[index].infoVal = tableType[index].infoVals;
      }
    },
    // 时间选择
    hourChange (index, row, tableType) {
      tableType[index].infoVal = [tableType[index].hourOne, tableType[index].hourTwo];
    },
    // 选择时间范围
    chooseTimeRange (index, row, tableType) {
      if (tableType[index].tagIn === 1 && tableType[index].shapeTag === 3) {
        tableType[index].infoVal = row.infoVals;
      } else if (tableType[index].tagIn === 2 && tableType[index].shapeTag === 3) {
        tableType[index].infoVal = row.infoVal;
      }
    },
    // 选择数据
    changeSelect (index, row) {
      // this.tableData.push({}) this.tableData.splice(index + 1, 1)
    },
    // 获取类型名称下拉数据
    getSelectAllNewable () {
      let id = this.$store.state.userId
      getWorkOrderTypeByUserId(id).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          this.workTypeList = data.data;
        } else {
          this.$message({ type: "error", message: data.msg });
        }
      });
    },
    // 中转数据
    transDataFun (typeSign) {
      if (typeSign === "allConditionsTableData") {
        if (this.allConditionsTableDataInfo !== []) {
          for (var allIndex = 0; allIndex < this.allConditionsTableDataInfo.length; allIndex++) {
            this.addAllConditionsTableData();
            this.allConditionsTableData[allIndex].typeValue = this.allConditionsTableDataInfo[allIndex].firstId.value; // 第一个
            this.allConditionsTableData[allIndex].containValue = this.allConditionsTableDataInfo[allIndex].secondDataId.value; // 第二个
            this.allConditionsTableData[allIndex].containValueUser = this.allConditionsTableDataInfo[allIndex].typeId.value; // 第二个
            this.allConditionsTableData[allIndex].dataList = this.allConditionsTableDataInfo[allIndex].fourthList;
            this.allConditionsTableData[allIndex].infoVal = this.allConditionsTableDataInfo[allIndex].value; // 第三个
            this.allConditionsTableData[allIndex].infoVals = this.allConditionsTableDataInfo[allIndex].value;
            if (this.allConditionsTableDataInfo[allIndex].tagIn === 2 && this.allConditionsTableDataInfo[allIndex].shapeTag === 5) {
              this.allConditionsTableData[allIndex].hourOne = this.allConditionsTableData[allIndex].infoVal[0];
              this.allConditionsTableData[allIndex].hourTwo = this.allConditionsTableData[allIndex].infoVal[1];
            }
            this.selectAllConditionVal = this.allConditionsTableDataInfo[allIndex].firstIdList;
            this.allConditionsTableData[allIndex].selectSecondConditionValUser = this.allConditionsTableDataInfo[allIndex].secondList;
            this.allConditionsTableData[allIndex].selectSecondConditionVal = this.allConditionsTableDataInfo[allIndex].thirdList;
            this.allConditionsTableData[allIndex].tagIn = this.allConditionsTableDataInfo[allIndex].tagIn;
            this.allConditionsTableData[allIndex].shapeTag = this.allConditionsTableDataInfo[allIndex].shapeTag;
            this.allConditionsTableData[allIndex].tagShow = this.allConditionsTableDataInfo[allIndex].tag;
          }
        }
      } else if (typeSign === "randomConditionsTableData") {
        if (this.randomConditionsTableDataInfo !== []) {
          for (var randIndex = 0; randIndex < this.randomConditionsTableDataInfo.length; randIndex++) {
            this.addRandomConditionsTableData();
            this.randomConditionsTableData[randIndex].typeValue = this.randomConditionsTableDataInfo[randIndex].firstId.value; // 第一个
            this.randomConditionsTableData[randIndex].containValue = this.randomConditionsTableDataInfo[randIndex].secondDataId.value; // 第二个
            this.randomConditionsTableData[randIndex].containValueUser = this.randomConditionsTableDataInfo[randIndex].typeId.value; // 第二个
            this.randomConditionsTableData[randIndex].dataList = this.randomConditionsTableDataInfo[randIndex].fourthList;
            this.randomConditionsTableData[randIndex].infoVal = this.randomConditionsTableDataInfo[randIndex].value; // 第三个
            this.randomConditionsTableData[randIndex].infoVals = this.randomConditionsTableDataInfo[randIndex].value;
            if (this.randomConditionsTableDataInfo[randIndex].tagIn === 2 && this.randomConditionsTableDataInfo[randIndex].shapeTag === 5) {
              this.randomConditionsTableData[randIndex].hourOne = this.randomConditionsTableData[randIndex].infoVal[0];
              this.randomConditionsTableData[randIndex].hourTwo = this.randomConditionsTableData[randIndex].infoVal[1];
            }
            this.selectAllConditionVal = this.randomConditionsTableDataInfo[randIndex].firstIdList;
            this.randomConditionsTableData[randIndex].selectSecondConditionValUser = this.randomConditionsTableDataInfo[randIndex].secondList;
            this.randomConditionsTableData[randIndex].selectSecondConditionVal = this.randomConditionsTableDataInfo[randIndex].thirdList;
            this.randomConditionsTableData[randIndex].tagIn = this.randomConditionsTableDataInfo[randIndex].tagIn;
            this.randomConditionsTableData[randIndex].shapeTag = this.randomConditionsTableDataInfo[randIndex].shapeTag;
            this.randomConditionsTableData[randIndex].tagShow = this.randomConditionsTableDataInfo[randIndex].tag;
          }
        }
      }
    },
    // 获取触发器的详情信息
    getTriggerDetailInfo () {
      let id = this.$store.state.triggerId + "";
      let _this = this
      getDetailById(id).then(res => {
        let data = res.data;
        if (data.retCode === 200) {
          if (data.data) {
            _this.trigger = data.data;
            _this.triggerId = data.data.id;
            _this.performTableData = data.data.triggerAction.performTableData;
            for (var x = 0; x < _this.performTableData.length; x++) {
              if (_this.performTableData[x].dictCode.indexOf('send_msg') >= 0) {
                _this.msgTemplateList = _this.msgTemplate;
              } else if (_this.performTableData[x].dictCode.indexOf('push_msg') >= 0) {
                _this.msgTemplateList = _this.sysMsgTemplate;
              } else if (_this.performTableData[x].dictCode.indexOf('send_email') >= 0) {
                _this.msgTemplateList = _this.emailTemplate;
              }
            }
            // 部门数据的处理
            for (var i = 0; i < _this.performTableData.length; i++) {
              if (_this.performTableData[i].containValue == 'dept') {
                _this.deptShow = 'dept'
              }
            }
            _this.$store.commit("triggerTypeIdFun", data.data.workOrderTypeId);
            _this.trigger.workOrderTypeId = Number(data.data.workOrderTypeId);
            _this.trigger.triggerType = data.data.triggerType;
            if (data.data.triggerCondition) {
              _this.allConditionsTableDataInfo = data.data.triggerCondition.allConditionsTableData || [];
              _this.randomConditionsTableDataInfo = data.data.triggerCondition.randomConditionsTableData || [];
              _this.transDataFun("allConditionsTableData");
              _this.transDataFun("randomConditionsTableData");
            }
          }
        } else {
          _this.$message({ type: "error", message: data.msg });
        }
      });
    },
    // 返回到上一级
    goBack () {
      this.$router.go(-1);
    },
    // 所有筛选添加的删除按钮
    deleteAllConditionsTableData (index, row, tableType) {
      this.allConditionsTableData.splice(index, 1);
    },
    // 任一条件的删除按钮
    deleteRandomConditionsTableData (index, row) {
      this.randomConditionsTableData.splice(index, 1);
    },
    // 执行动作的删除按钮
    deletePerformTableData (index, row) {
      this.performTableData.splice(index, 1);
    },
    // 添加所有筛选条件
    addAllConditionsTableData () {
      let item = {
        typeValue: "", // 第一个值
        containValue: "", // 第二个值
        containValueUser: "", // 第二个值
        info: "",
        selectSecondConditionVal: [],
        selectSecondConditionValUser: [],
        tagShow: 1,
        userVal: [],
        dataList: [
          {
            label: "下拉框1",
            value: "111"
          }, {
            label: "下拉框2",
            value: "111"
          }
        ],
        shapeTag: "",
        tagIn: "",
        infoVal: "", // 第三个值
        infoVals: [], // 第三个值
        hourOne: "",
        hourTwo: ""
      };
      this.allConditionsTableData.push(item);
    },
    // 添加任一筛选条件
    addRandomConditionsTableData () {
      let item = {
        typeValue: "", // 第一个值
        containValue: "", // 第二个值
        containValueUser: "", // 第二个值
        info: "",
        selectSecondConditionVal: [],
        selectSecondConditionValUser: [],
        tagShow: 1,
        userVal: [],
        dataList: [
          {
            label: "下拉框1",
            value: "111"
          }, {
            label: "下拉框2",
            value: "111"
          }
        ],
        shapeTag: "",
        tagIn: "",
        infoVal: "", // 第三个值
        infoVals: [], // 第三个值
        hourOne: "",
        hourTwo: ""
      };
      this.randomConditionsTableData.push(item);
    },
    getTriggerActionTypeSecondListFun (val, index) {
      let _this = this
      getTriggerActionTypeSecondList(val).then(res => {
        if (res.data.retCode === 200) {
          _this.performTableData[index].selectSecondConditionVal = res.data.data || [];
        }
      })
    },
    // 执行动作中更改类型
    async changePerformType (index, row) {
      let _this = this
      this.performTableData[index].msgTemplate = "";
      this.performTableData[index].msgTemplateTitle = "";
      // 推送短信消息
      // if (row.dictCode == "push_msg_handler" || row.dictCode == 'push_msg_sysuser' || row.dictCode == 'push_msg_monitor' || row.dictCode == 'push_msg_creater') {
      //   this.getMsgTemplate()
      // }
      if (row.dictCode.indexOf('send_msg') >= 0) {
        _this.msgTemplateList = _this.msgTemplate;
      } else if (row.dictCode.indexOf('push_msg') >= 0) {
        _this.msgTemplateList = _this.sysMsgTemplate;
      } else if (row.dictCode.indexOf('send_email') >= 0) {
        _this.msgTemplateList = _this.emailTemplate;
      }
      this.performTableData[index].containValue = "";
      this.performTableData[index].containValueUser = "";
      this.performTableData[index].selectSecondConditionValUser = "";
      await this.getTriggerActionTypeSecondListFun(row.dictCode, index)
      if (row.dictCode === "push_interface") {
        // 接口配置数据调取的时候校验工单流程
        if (this.$store.state.triggerTypeId) {
          this.getWorkTypeAllFiledInfoByWorkOrderTypeIdFun(this.$store.state.triggerTypeId, index);
        } else {
          this.$message({ type: "error", message: "请选择相应的工单流程" });
        }
      }
    },
    // 获取用户/角色/部门的数据
    changeSelectSecondConditionVal (index, row1, performTableDataList) {
      if (row1.containValue == 'dept') {
        this.deptShow = 'dept'
      } else {
        this.deptShow = ''
      }
      this.performTableData[index].selectSecondConditionValUser = "";
      this.performTableData[index].containValueUser = "";
      for (var item in performTableDataList.selectSecondConditionVal) {
        if (performTableDataList.selectSecondConditionVal[item].children) {
          if (row1.containValue === performTableDataList.selectSecondConditionVal[item].value) {
            performTableDataList.selectSecondConditionValUser = performTableDataList.selectSecondConditionVal[item].children;
          }
        }
      }
    },
    // 执行动作
    addPerformTableData () {
      let item = {
        dictCode: "", // 第一个值
        containValue: "", // 第二个值
        containValueUser: "", // 第二个数组值
        sysTitle: "", // 系统信息发送标题
        sysContent: "", // 系统发送的内容
        msgTemplate: '', // 短信模板的内容
        msgTemplateTitle: "", // 短信模板对应的名字
        msgTemplateId: "", // 模板对应id
        selectSecondConditionVal: [],
        selectSecondConditionValUser: []
      };
      this.performTableData.push(item);
    },
    // 新建接口
    addSaveFun (params) {
      addSave(params).then(res => {
        if (res.data.retCode === 200) {
          this.$message({ type: "success", message: res.data.msg });
          this
            .$router
            .push("/workTrigger");
        } else {
          this.$message({ type: "error", message: res.data.msg });
        }
      });
    },
    // 编辑接口
    upadteByIdFun (params) {
      upadteById(params).then(res => {
        if (res.data.retCode === 200) {
          this.$message({ type: "success", message: res.data.msg });
          this
            .$router
            .push("/workTrigger");
        } else {
          this.$message({ type: "error", message: res.data.msg });
        }
      });
    },
    // 提交
    onSubmit (formName) {
      let params = {
        createUserId: this.$store.state.userId,
        status: "0",
        id: this.triggerId || "",
        triggerDescribe: this.trigger.triggerDescribe,
        triggerName: this.trigger.triggerName,
        updateUserId: this.$store.state.userId,
        workOrderTypeId: this.trigger.workOrderTypeId + "",
        triggerType: this.trigger.triggerType,
        triggerCondition: {
          allConditionsTableData: [],
          randomConditionsTableData: []
        },
        triggerAction: {
          performTableData: this.performTableData
        }
      };
      for (var indexAll = 0; indexAll < this.allConditionsTableData.length; indexAll++) {
        params.triggerCondition.allConditionsTableData.push({
          firstId: this.allConditionsTableData[indexAll].typeValue,
          secondDataId: this.allConditionsTableData[indexAll].containValue,
          typeId: this.allConditionsTableData[indexAll].containValueUser,
          value: this.allConditionsTableData[indexAll].infoVal,
          firstList: this.selectAllConditionVal || [],
          secondList: this.allConditionsTableData[indexAll].selectSecondConditionValUser || [],
          thirdList: this.allConditionsTableData[indexAll].selectSecondConditionVal || [],
          fourthList: this.allConditionsTableData[indexAll].dataList || []
        });
      }
      for (var indexRan = 0; indexRan < this.randomConditionsTableData.length; indexRan++) {
        params.triggerCondition.randomConditionsTableData.push({
          firstId: this.randomConditionsTableData[indexRan].typeValue,
          secondDataId: this.randomConditionsTableData[indexRan].containValue,
          typeId: this.randomConditionsTableData[indexRan].containValueUser,
          value: this.randomConditionsTableData[indexRan].infoVal,
          firstList: this.selectAllConditionVal || [],
          secondList: this.randomConditionsTableData[indexRan].selectSecondConditionValUser || [],
          thirdList: this.randomConditionsTableData[indexRan].selectSecondConditionVal || [],
          fourthList: this.randomConditionsTableData[indexRan].dataList || []
        });
      }
      // for (var perIndex in this.performTableData) {   if
      // (this.performTableData[perIndex].dictCode === 'push_interface') {
      // this.performTableData[perIndex].containValue = this.ruleFormTableData
      // this.performTableData[perIndex].containValue.Headers =
      // this.ruleFormTableData.Headers ? this.ruleFormTableData.Headers.replace(' ',
      // '') : ''   } }
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 编辑
          if (this.$store.state.triggerId) {
            this.upadteByIdFun(params);
          } else {
            this.addSaveFun(params);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.el-icon-arrow-left {
  font-size: 13px;
  color: #b60028;
  font-weight: 700;
  padding: 0 5px;
  cursor: pointer;
}
.h30Btn {
  float: right;
}
>>> .el-button--mini,
>>> .el-button--mini.is-round {
  margin: 0;
}
.sequence-flow-btn {
  cursor: pointer;
}
.customFieldDialog >>> .el-dialog__body {
  padding: 0 20px;
}
</style>
